<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 800px;
            height: 400px;
            margin: 0 auto;
        }

        table {
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <table cellspacing="20">
            <tr>
                <th><input type="checkbox" value="全选" id="all"></th>
                <th>产品</th>
                <th>价钱</th>

            </tr>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td>iphone</td>
                <td>5000</td>

            </tr>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td>iwatch</td>
                <td>2000</td>

            </tr>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td>ipad</td>
                <td>3000</td>

            </tr>
        </table>
        <input type="button" class="inverse" value="反选">
    </div>

    <script>

        var btnAll = document.querySelector('#all');
        var checkbox = document.querySelectorAll('.check');
        var btnInv = document.querySelector('.inverse');
        // 实现 全选操作
        btnAll.onclick = function () {
            var temp = this.checked;
            for (var i = 0; i < checkbox.length; i++) {
                checkbox[i].checked = temp;
            }
        }

        // 反选
        btnInv.onclick = function () {
            console.log(1);
            for (var i = 0; i < checkbox.length; i++) {
                // 改成反面
                checkbox[i].checked = !checkbox[i].checked;
            }

            checkAll();
        }


        // 当所有产品被选中时,  全选按钮要跟着改变
        // 所以 需要 每次 选完产品,要对 所有的产品 进行检测看  大家是否都被选中

        for (var i = 0; i < checkbox.length; i++) {
            checkbox[i].onclick = function () {
                // 检测 大家是否都被选中
                checkAll();

            }
        }

        function checkAll() {
            // 判断 三个按钮的选中状态
            var flag = true; // 假设大家都被选中
            for (var i = 0; i < checkbox.length; i++) {
                if(checkbox[i].checked){

                }else{
                    flag = false;
                    break;
                }
            }
            // flag 为真  ,全选中,,flag  为 假  ,全选按钮 不高亮
            btnAll.checked = flag;
        }
    </script>
</body>

</html>